<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    thead {
      border: 1px solid #e9e9e9;
      border-collapse: collapse;
      border-spacing: 0;
    }

    th, td {
      padding: 8px 16px;
      border: 1px solid #e9e9e9;
      text-align: left;
    }

    th {
      background-color: #f7f7f7;
      color: #5c6b77;
      font-width: 600;;
    }
  </style>
</head>
<body>
<div id="app">
  <div v-if="books.length">
    <table>
      <thead>
      <tr>
        <th></th>
        <th>书籍名称</th>
        <th>初版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>价格</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in books">
        <th>{{item.id}}</th>
        <th>{{item.name}}</th>
        <th>{{item.date}}</th>
        <th>{{item.price | showPrice}}</th><!-- 中间的 | 表示过滤器 -->
        <th>
          <button @click="decrement(index)" :disabled="item.count <= 1">-</button>
          {{item.count}}
          <button @click="increment(index)">+</button>
        </th>
        <th>
          <button @click="removeHandle(index)">移除</button>
        </th>
      </tr>
      </tbody>
    </table>
    <h2>总价格：{{totalPrice | showPrice}}</h2>
  </div>
  <div v-else>
    <h2>购物车已空</h2>
  </div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      books: [
        {
          id: 1,
          name: "《算法导论》",
          date: "2006-9",
          price: 85.00,
          count: 1
        },
        {
          id: 2,
          name: "《UNIX编程艺术》",
          date: "2006-2",
          price: 59.00,
          count: 1
        },
        {
          id: 3,
          name: "《编程珠玑》",
          date: "2008-10",
          price: 39.00,
          count: 1
        },
        {
          id: 4,
          name: "《编程大全》",
          date: "2006-3",
          price: 128.00,
          count: 1
        },
      ],
    },
    methods: {
      getFinalPrice(price) {
        return '￥' + price.toFixed(2);
      },
      increment(index) {
        this.books[index].count++;
      },
      decrement(index) {
        this.books[index].count--;
      },
      removeHandle(index) {
        this.books.splice(index, 1);
      },
    },
    computed: {
      totalPrice() {
        let totalPrice = 0;
        // for (let i=0; i<this.books.length; i++) {
        //   totalPrice += this.books[i].price * this.books[i].count;
        // }

        // for (let i in this.books) {
        //   totalPrice += this.books[i].price * this.books[i].count;
        // }

        // for (let i in this.books) {
        //   totalPrice += this.books[i].price * this.books[i].count;
        // }

        // for (let item of this.books) {
        //   totalPrice += item.price * item.count;
        // }
        // return totalPrice;

        return this.books.reduce(function (preValue, book) {
          return preValue + book.price * book.count;
        }, 0)
      }
    },
    filters: { // 过滤器
      showPrice(price) {
        return '￥' + price.toFixed(2);
      },
    }
  })
</script>
</html>